<!--
*@Author: zt
*@Description: 评论组件
*@Date: 2025-03-12
-->
<template>
  <a-comment>
    <template #avatar>
      <div class="avatar-style">{{ props.userName.charAt(0) }}</div>
    </template>
    <template #author>
      <div class="user-header-style">
        <div class="user-header-userName">{{ props.userName }}</div>
        <div class="user-header-time">{{ props.createtime }}</div>
      </div>
    </template>
    <template #content>
      <p>{{ props.content }}</p>
    </template>
    <template #actions>
      <span>
        <span @click="itemClick(props)">
          <u-icon-font :type="enmuList.iconList.pl" style="margin-right: 8px" />
          <span class="text-margin-8">回复</span>
        </span>
        <span class="icon-margin-64" @click="deleteItem(props.keyid)">
          <u-icon-font :type="enmuList.iconList.sc" />
          <span class="text-margin-8">删除</span>
        </span>
      </span>
    </template>
    <!-- 子级回复 -->
    <a-comment v-for="(item, index) in children" :key="index">
      <template #avatar>
        <div class="avatar-style">{{ item.userName.charAt(0) }}</div>
      </template>
      <template #author>
        <div class="user-header-style1">
          <div class="userName1-box-style">
            <div class="user-header-userName1">{{ item.userName }}</div>
            <CaretRightOutlined />
            <div class="user-header-userName2">{{ item.fkUserName }}</div>
          </div>
          <div class="user-header-time1">{{ item.createtime }}</div>
        </div>
      </template>
      <template #content>
        <p>{{ item.content }}</p>
      </template>
      <template #actions>
        <span>
          <span @click="itemClick(item)">
            <u-icon-font
              :type="enmuList.iconList.pl"
              style="margin-right: 8px"
            />
            <span class="text-margin-8">回复</span>
          </span>
          <span class="icon-margin-64" @click="deleteItem(item.keyid, '2')">
            <u-icon-font :type="enmuList.iconList.sc" />
            <span class="text-margin-8">删除</span>
          </span>
        </span>
      </template>
    </a-comment>
    <div
      class="more-style"
      v-if="childCount && showMore"
      @click="clickMore(props)"
    >
      查看更多
    </div>
  </a-comment>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { CaretRightOutlined } from '@ant-design/icons-vue';

import * as ENMULIST from './Enmu';

// 枚举集合
const enmuList = ref(ENMULIST);

const props = defineProps<{
  userName: string;
  createtime: string;
  children?: Array<any>;
  content: string;
  childCount?: any;
  postId: string;
  keyid: string;
  createuserid: string;
}>();

const children = ref(props.children);

const childCount = ref(Number(props.childCount));

const showMore = ref(false);

// 显示点击更多
const showMoreFun = () => {
  if (children.value.length < childCount.value) {
    showMore.value = true;
  } else {
    showMore.value = false;
  }
};

const emits = defineEmits(['itemClick', 'clickMore', 'deleteItem']);

//点击回复
const itemClick = val => {
  emits('itemClick', val);
};
//点击更多
const clickMore = val => {
  emits('clickMore', val, children.value.length);
};
//删除
const deleteItem = (val, nval?: string) => {
  emits('deleteItem', val, nval);
};
showMoreFun();
watch(
  () => props.children,
  () => {
    children.value = props.children;
    showMoreFun();
  },
  {
    immediate: true,
  }
);

watch(
  () => props.childCount,
  () => {
    childCount.value = props.childCount;
  },
  {
    immediate: true,
  }
);
</script>

<style lang="scss" scoped>
:deep(.ant-comment .ant-comment-inner) {
  padding: 10px 0 !important;
}
:deep(.ant-comment-inner) {
  padding: 10px 0 !important;
}
.avatar-style {
  width: 32px;
  height: 32px;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff;
  background-color: #1890ff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.user-header-style {
  width: 1090px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.user-header-style1 {
  width: 1045px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .userName1-box-style {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .user-header-userName1 {
      margin-right: 10px;
    }
    .user-header-userName2 {
      margin-left: 10px;
    }
  }
}

.icon-margin-64 {
  margin-left: 64px;
  .text-margin-8 {
    margin-left: 8px;
  }
}

.more-style {
  width: 171px;
  height: 40px;
  background: #f0f2f5;
  border-radius: 4px 4px 4px 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  box-sizing: border-box;
  cursor: pointer;
}
</style>
